<template>
  <div class="notification">
    <div class="hanlder">
      <el-button text :icon="RefreshLeft">刷新</el-button>
      <el-button type="primary" :icon="Plus">新增通知模版</el-button>
    </div>
    <el-table :data="list">
      <el-table-column label="序号" type="index" width="120"></el-table-column>
      <el-table-column label="模版名称" prop="title"></el-table-column>
      <el-table-column label="通知方式" prop="mode"></el-table-column>
      <el-table-column label="通知类型" prop="type"></el-table-column>
      <el-table-column label="更新时间" prop="updateTime" widht="343"></el-table-column>
      <el-table-column label="操作" width="257">
        <template #default="scope">
          <el-button type="primary" text>查看</el-button>
          <el-button type="primary" text>编辑</el-button>
          <el-button type="danger" text>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination background layout="total,sizes,prev, pager, next,jumper" :total="1000" />
    </div>

  </div>
</template>
<script setup>

import { RefreshLeft, Plus } from "@element-plus/icons-vue";
import { ref } from "vue";
const list = ref([
  {
    title: "设备名称",
    mode: "WebHook",
    type: "系统内置模板",
    updateTime: "2023-03-21 11:11:11",
  },
  {
    title: "设备名称",
    mode: "WebHook",
    type: "系统内置模板",
    updateTime: "2023-03-21 11:11:11",
  }
])
</script>
<style lang="scss" scoped>
.notification {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 210px);

  .hanlder {
    margin-bottom: 16px;
  }

  .el-table {
    flex: 1;
    margin-bottom: 16px;
  }

  .pagination {
    display: flex;
    justify-content: end;
  }
}
</style>